<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>danceWeui框架</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<link rel="stylesheet" href="../../css/weui.min.css">
	<link rel="stylesheet" href="../../css/danceWeui.css">
	<link rel="stylesheet" href="../../../iconfont/iconfont.css">
</head>
<body class="page__bg">

<div class="daui-navbar bg-gradual-blue">
	<div class="daui-navbar__hd">
		<a href="javascript:history.back(-1)"><i class="iconfontzz icon-fanhuijiantou"></i>返回</a>
	</div>
	<div class="daui-navbar__bd">标签</div>
	<div class="daui-navbar__hd">
		<a href="../index.html"><i class="iconfontzz icon-home"></i></a>
	</div>
</div>

<div class="page__bd">
	<div class="daui-headline daui-headline_left">
		<div class="daui-headline__text-area">
			<h2 class="daui-headline__title">标签 Tag</h2>
			<p class="daui-headline__desc">可自定义大小，设置字体大小，圆角，镂空等。</p>
		</div>
	</div>
	
	<div class="daui-cells__title">基础功能</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<span class="daui-tag">默认</span>
		</div>
	</div>

	<div class="daui-cells__title">自定义主题</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_primary">主要</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_success">成功</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_info">信息</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_warning">警告</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_danger">危险</div>
		</div>
	</div>

	<div class="daui-cells__title">自定义颜色</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag bg-blue">蓝色</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag bg-gradual-green">渐变绿色</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag bg-purple">紫色</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag bg-gradual-red">渐变红色</div>
		</div>
	</div>

	<div class="daui-cells__title">圆形标签</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-warning round">椭圆</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-warning radius">圆角</div>
		</div>
	</div>

	<div class="daui-cells__title">镂空标签</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-primary">主要</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-success">成功</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-info">信息</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-warning">警告</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-danger">危险</div>
		</div>
	</div>

	<div class="daui-cells__title">镂空带背景色</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-primary">主要</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-success">成功</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-info">信息</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-warning">警告</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-danger">危险</div>
		</div>
	</div>

	<div class="daui-cells__title">自定义尺寸</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_-primary">小尺寸</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-success">普通尺寸</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-warning">中尺寸</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-tag daui-tag_plain-fill-danger">大尺寸</div>
		</div>
	</div>

	<div class="daui-cells__title">胶囊样式</div>
	<div class="daui-grid col-4 margin-bottom text-center bg-white">
		<div class="daui-grid__item padding">
			<div class="daui-capsule">
				<div class="daui-tag bg-red">
					<text class="iconfontzz icon-likefill"></text>
				</div>
				<div class="daui-tag line-red">
					12
				</div>
			</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-capsule round">
				<div class="daui-tag bg-blue">
					<text class="iconfontzz icon-likefill"></text>
				</div>
				<div class="daui-tag line-blue">
					23
				</div>
			</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-capsule round">
				<div class="daui-tag bg-blue">
					说明
				</div>
				<div class="daui-tag line-blue">
					123
				</div>
			</div>
		</div>
		<div class="daui-grid__item padding">
			<div class="daui-capsule radius">
				<div class="daui-tag bg-grey">
					<text class="iconfontzz icon-likefill"></text>
				</div>
				<div class="daui-tag line-grey">
					23
				</div>
			</div>
		</div>
	</div>
	
</div>

<div class="daui-gap daui-gap_transparent"></div>
<div class="daui-footer">
	<div class="daui-footer__links">
		<a class="daui-footer__links-item" href="../index.html">DanceWeUI首页</a>
		<a class="daui-footer__links-item" href="https://gitee.com/lianlianzan/danceui" target="_blank">去码云下载</a>
	</div>
	<div class="daui-footer__text">Copyright &copy; DanceUI</div>
</div>

</body>
</html>